<template>
<div>
  <Header></Header>
  <div class="crumb">
    <div class="w">
      <div class="crumb-con">
        <a class="link" href="./index.html">睿购商城</a>
        <span>&gt;</span>
        <span class="link-text">订单列表</span>
      </div>
    </div>
  </div>
  <div class="order-list-wrap w">
    <div class="left-con">
      <ul class="menu">
        <li class="menu-item">
          <router-link class="link" to="/userCenter">个人中心</router-link>
        </li>
        <li class="menu-item active">
          <router-link class="link" to="/orderList">我的订单</router-link>
        </li>
        <li class="menu-item">
          <router-link class="link" to="/userPassUpdate">修改密码</router-link>
        </li>
      </ul>
    </div>
    <div class="right-con">
      <div class="panel">
        <div class="panel-title">
          我的订单
        </div>
        <div class="panel-body">
          <div class="order-list">
            <div class="order-list">
              <table class="order-list-table header">
                <tbody>
                <tr>
                  <th class="order-list-cell cell-img">&nbsp;</th>
                  <th class="order-list-cell cell-info">商品信息</th>
                  <th class="order-list-cell cell-price">单价</th>
                  <th class="order-list-cell cell-count">数量</th>
                  <th class="order-list-cell cell-total">合计</th>
                </tr>
                </tbody>
              </table>
              <table class="order-list-table order-item">
                <tbody v-for="item in orderList">
                <tr>
                  <td class="order-info" colspan="6">
                                                <span class="order-text">
                                                    <span>订单号：</span>
                                                    <a class="link" href="./order-detail.html?orderNumber=">{{item.orderNo}}</a>
                                                </span>
                    <span class="order-text">2018-12-07 14:15:14</span>
                    <span class="order-text">
                                                    <span>收件人：张三</span>
                                                </span>
                    <span class="order-text">
                                                    <span>订单状态：未支付</span>
                                                </span>
                    <span class="order-text"> <span>订单总价：</span>
                                                <span class="enhance">{{item.payment}}</span>
                                            </span>
                    <a class="link pull-right" href="./order-detail.html?orderNumber=">查看详情&gt;</a>
                  </td>
                </tr>
                <tr>
                  <td class="order-list-cell cell-img">
                    <a href="./detail.html?productId=107" target="_blank">
                      <img class="p-img" src="../assets/tv-ssmall.jpg"></a>
                  </td>
                  <td class="order-list-cell cell-info">
                    <a class="link p-name" href="./detail.html?productId=107" target="_blank">索尼（SONY）KD-65X8566E 65英寸4K HDR腾讯视频 安卓7.0智能液晶电视（黑色）</a>
                  </td>
                  <td class="order-list-cell cell-price">￥2799</td>
                  <td class="order-list-cell cell-count">1</td>
                  <td class="order-list-cell cell-total">￥2799</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="pagination"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import Header from '../components/Header'
  export default {
        name: "OrderList",
        components: {Header},
        data() {
          return {
            orderList:[],
            orderDetailList:[]
          }
        },
        created() {
          this.reqOrderList();
        },
        methods:{
          reqOrderList:function(){
            this.axios.get('/order/list.do')
              .then((response) => {
                this.orderList = response.data.data.list
                console.log({"orderList":this.orderList})
              })
          }
        }
    }
</script>

<style scoped>
  /* å¯¼èˆªä¸»ä½“ */
  .nav-side{
    float: left;
    width: 130px;
    min-height: 100px;
  }
  .nav-side .nav-item{
    line-height: 25px;
    font-size: 13px;
  }
  .nav-side .nav-item .link{
    color: #888;
  }
  .nav-side .nav-item.active .link{
    color: #FF8800;
  }
  /* å³ä¾§å†…å®¹åŒº */
  .content.with-nav{
    float: left;
    width: 950px;
  }

  .order-list-table{
    width: 100%;
    border-collapse: collapse;
    background: #fafafa;
    margin-bottom: 20px;
  }
  .order-list-table .cell{
    padding: 10px 0;
    color: #666;
    border-bottom: 1px solid #eee;
  }
  .order-list-table.header{
    background: #eee;
  }
  .order-list-table .order-info{
    background: #eee;
    padding: 10px;
    color: #999;
  }
  .order-list-table .order-info .order-text{
    margin-right: 25px;
  }
  .order-list-table .order-info .order-num{
    font-weight: bold;
  }
  .order-list-table .order-info .order-total{
    font-weight: bold;
    color: #FF8800;
  }
  .order-list-table .order-info .order-detail{
    float: right;
  }

  .order-list-table .cell-img{
    padding: 10px;
    width: 10%;
    text-align: center;
  }
  .order-list-table .cell-img .p-img{
    width: 80px;
    height: 80px;
    border: 1px solid #ddd;
  }
  .order-list-table .cell-info{
    width: 45%;
    text-align: left;
  }
  .order-list-table .cell-price{
    width: 15%;
    text-align: center;
  }
  .order-list-table .cell-count{
    width: 15%;
    text-align: center;
  }
  .order-list-table .cell-total{
    width: 15%;
    text-align: center;
  }
</style>
